<template>
  <div class="allotApp-publicStyle">
    <!-- 分配应用 -->
    <div class="title">{{ $t("module.tenantManage.allotApp") }}</div>
    <!-- <Divider orientation="left">{{ $t("module.tenantManage.allotApp") }}</Divider> -->
    <!-- 分配应用 列表 -->
    <!-- <Table 
        max-height="233" 
        :columns="appLication.columns" 
        :data="appLication.data"
        @on-select="selectAllotApply"
        @on-select-cancel="selectAllotApply"
        @on-select-all="selectAllotApply"
        @on-select-all-cancel="selectAllotApply"
    ></Table>-->
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="allotAppSearchForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 搜索编码和名称 -->
        <Form-item prop="nameOrCode">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.nameOrCode"
            :placeholder="$t('module.tenantManage.placeholder.enterAppCodeOrAppName')"
            @on-enter="search"
          ></Input>
        </Form-item>
        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="search" />
          <RPButton optType="reset" @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <!-- 表格 -->
    <InnerPageTable
      :config="tableConfig"
      @onSelectionChange="selectAllotApply"
      class="dialog-cancel-tablestyle"
    ></InnerPageTable>
  </div>
</template>

<script>
// 分配应用
import locales from "./locales.js";
export default {
  name: "AllotApp",
  mixins: [locales],
  props: {
    appLication: Object
  },
  data() {
    return {
      tableConfig: {},
      // 搜索
      searchForm: {
        nameOrCode: ""
      }
    };
  },
  // 监听值变化
  watch: {
    appLication: {
      handler(newVal, oldVal) {
        this.tableConfig.resource = newVal.data;
      },
      deep: true
    }
  },
  created() {
    // 初始化表格配置
    this.tableConfig = {
      resource: this.appLication.data, // 数据源
      columns: this.appLication.columns, // 表格列配置
      autoFirst: true, // 渲染第一页数据
      isPage: false,
      onSelectionChange: this.selectAllotApply,
      rowClassNameFn: this.rowClassName // 自定义行样式
    };
  },
  methods: {
    // 自定义行样式
    rowClassName(row) {
      // enabled:1-有效；0-无效
      if (row.enabled == 0) {
        return "tableDisableStyle";
      }
    },
    // 搜索
    search() {
      this.$emit("handleSearchAllotApp", this.searchForm, "search");
    },
    // 重置
    reset() {
      this.$refs["allotAppSearchForm"].resetFields();
      this.$emit("handleSearchAllotApp", this.searchForm, "reset");
    },
    // 选中某一项时触发
    selectAllotApply(selection) {
      this.$emit(
        "handleAllotApp",
        selection.map(items => {
          return items.clientId;
        })
      );
    }
  }
};
</script>
